import React, { useEffect, useState } from 'react';
import { DeleteFilled, RedoOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Input, Table, Space, Switch, Drawer, Form, Select, notification } from 'antd';
import './Menu.scss'
import * as service from '../../../../api/index'
import _ from 'lodash'

const Menu = () => {

    const { Search, TextArea } = Input
    const [loading, setLoading] = useState(false)
    const [data, setData] = useState([])
    const [open, setOpen] = useState(false)
    const [form] = Form.useForm()
    const [menuId, setMenuId] = useState('')
    const [current, setCurrent] = useState(1)
    const [pagesize, stePagesize] = useState(10)
    const [totals, setTotals] = useState(0)

    const columns = [
        {
            title: '操作',
            width: 120,
            key: '1',
            render: (record: any) => (
                <Space size="middle">
                    <Button size='small' icon={<PlusOutlined />}></Button>
                    <Button size='small' onClick={() => handleDelete(record)} icon={<DeleteFilled style={{ color: 'red' }} />}></Button>
                </Space>
            )
        },
        {
            title: '菜单名称',
            width: 180,
            dataIndex: 'menuName',
            key: '2',
        },
        {
            title: '路由',
            width: 180,
            dataIndex: 'menuRoute',
            key: '3',
        },
        {
            title: '类型',
            width: 180,
            dataIndex: 'menuType',
            key: '4',
        },
        {
            title: '设置默认页',
            width: 180,
            key: '5',
            render: (record: any) => (
                <Space size="middle">
                    <Switch onChange={() => handleChangeStatus(record)} checkedChildren="开" unCheckedChildren="关" checked={record.menuStatus == 0 ? true : false} />
                </Space>
            )
        },
        {
            title: '顺序',
            key: '6',
            dataIndex: 'menuSort',
        },
        {
            title: '描述',
            dataIndex: 'menuDescription',
            key: '7',
        },
    ];
    //获取数据
    var newData = async (current:any,pagesize:any) => {
        setLoading(true)
        var res = await service.default.wy.form_menu_queryAll({ cp: current, ps: pagesize })
        console.log(res.data);
        if (res.data.code == 200) {
            setLoading(false)
            setData(res.data.data.data)
        }
    }
    //点击修改单个数据的状态
    const changeFlag = async (menuId: any, menuStatus: any) => {
        var res = await service.default.wy.form_menu_updateStatus(menuId, menuStatus)
        if (res.data.code == 200) {
            notification.success({
                message: '提示',
                description: '修改状态成功',
            });
            var table = _.cloneDeep(data);
            var item: any = table.find((item: any) => item.menuId == menuId)
            if (item) {
                item.menuId = menuId
            }
            setData(table)
        }
    }

    useEffect(() => {
        newData(current,pagesize)
    }, [])
    //打开抽屉
    const showDrawer = () => {
        setOpen(true)
    }
    //关闭抽屉
    const onClose = () => {
        form.setFieldsValue({ menuId: '', menuName: '', menuRoute: '', menuType: '', menuStatus: '', menuSort: '', menuDescription: '' })
        setMenuId('')
        setOpen(false)
    }
    //点击新增打开抽屉
    const handleOpen = () => {
        showDrawer()
    }
    //根据关键字进行查询
    const onSearch = async (e: any) => {
        setLoading(true)
        var res = await service.default.wy.form_menu_queryKey(e)
        if (res.data.code == 200) {
            setLoading(false)
            setData(res.data.data)
        } else {
            setLoading(false)
            notification.error({
                message: '提示',
                description: '请输入正确的物料名称',
            });
            newData(current, pagesize)
        }
    }
    //新增数据
    const onFinish = async (values: any) => {
        Object.assign(values, {
            menuId: data.length + 1
        })
        var res = await service.default.wy.form_menu_add(values)
        console.log(res.data);
        if (res.data.code == 200) {
            setLoading(false)
            notification.success({
                message: '提示',
                description: '添加成功',
            });
            newData(current,pagesize)
            onClose()
        }
    }
    //删除单条数据
    const handleDelete = async (record: any) => {
        var res = await service.default.wy.form_menu_delete(record.menuId)
        if (res.data.code == 200) {
            notification.success({
                message: '提示',
                description: '删除成功',
            });
            var list = data.filter((item: any) => item.menuId != record.menuId)
            setData(list)
        }
    }
    //修改单个数据的状态
    const handleChangeStatus = (record: any) => {
        if (record.menuStatus == 0) {
            record.menuStatus = 1
            changeFlag(record.menuId, record.menuStatus)
        } else {
            record.menuStatus = 0
            changeFlag(record.menuId, record.menuStatus)
        }
    }
    //当前页改变时执行分页请求
    const changeSize = (page: any, pageSize: any) => {
        setCurrent(page)
        newData(page, pageSize)
    }
    //每页条数改变时执行的分页请求
    const showSizeChange = (current: any, size: any) => {
        stePagesize(size)
        newData(current, size)
    }
    return (
        <div className='menu'>
            <div className="menuBtns">
                <div>
                    <Button onClick={handleOpen} style={{ border: 'none' }} icon={<PlusOutlined />} size='middle'>
                        新增菜单
                    </Button>
                </div>
                <div className='menuSrech'>
                    <Search
                        placeholder="请输入菜单名称关键字"
                        enterButton="搜索"
                        onSearch={onSearch}
                    />
                    <div className="menuIcon">
                        <RedoOutlined />
                    </div>
                </div>
            </div>
            <div className="menuTable">
                <Table 
                columns={columns} 
                size='small' 
                dataSource={data} 
                loading={loading}
                pagination={{
                    current: current,
                    pageSize: pagesize,
                    pageSizeOptions: [4, 6, 8, 10],
                    showSizeChanger: true,
                    onChange: changeSize,
                    onShowSizeChange: showSizeChange,
                    total: totals,
                    showTotal: (total: any) => `共${total}条数据`
                }} />
            </div>
            <div className="dislog">
                <Drawer title='新增菜单' placement="right" onClose={onClose} open={open}>
                    <Form onFinish={onFinish} form={form}>
                        <Form.Item
                            label="ID"
                            name="menuId"
                        // rules={[{ required: true, message: '请输入!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="菜单名称"
                            name="menuName"
                            rules={[{ required: true, message: '请输入!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="路由"
                            name="menuRoute"
                            rules={[{ required: true, message: '请输入!' }]}
                        >
                            <Input />
                        </Form.Item>


                        <Form.Item
                            label="类型"
                            name="menuType"
                            rules={[{ required: true, message: '请选择!' }]}
                        >
                            <Select
                                placeholder='请选择'
                                options={[
                                    { value: '配置菜单', label: '配置菜单' },
                                    { value: '系统菜单', label: '系统菜单' },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item
                            label="设置默认页"
                            name="menuStatus"
                            rules={[{ required: true, message: '请选择!' }]}
                        >
                            <Select
                                placeholder='请选择'
                                options={[
                                    { value: 0, label: '是' },
                                    { value: 1, label: '否' },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item
                            label="顺序"
                            name="menuSort"
                            rules={[{ required: true, message: '请输入!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="描述"
                            name="menuDescription"
                        >
                            <TextArea rows={4} />
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                新增菜单
                            </Button>
                        </Form.Item>
                    </Form>
                </Drawer>
            </div>
        </div>
    );
};

export default Menu;